<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="calc">
        <form action="">
            <textarea name="" id="screen" onkeydown="return false"></textarea>
        </form>

        <div class="row1">
            <button onclick="appendToScreen('7')">7</button>
            <button onclick="appendToScreen('8')">8</button>
            <button onclick="appendToScreen('9')">9</button>
            <button id="controls" onclick="clearScreen()">C</button>
            <button id="controls" onclick="appendToScreen('*')">*</button>
            <button id="controls" onclick="appendToScreen('/')">/</button>
        </div>
        <div class="row2">
            <button onclick="appendToScreen('4')">4</button>
            <button onclick="appendToScreen('5')">5</button>
            <button onclick="appendToScreen('6')">6</button>
            <button id="controls" onclick="appendToScreen('+')">+</button>
            <button id="controls" onclick="changeSign()">+/-</button>
            <button id="controls" onclick="factorial()">x!</button>
        </div>
        <div class="row3">
            <button onclick="appendToScreen('1')">1</button>
            <button onclick="appendToScreen('2')">2</button>
            <button onclick="appendToScreen('3')">3</button>
            <button id="controls" onclick="appendToScreen('-')">-</button>
            <button id="controls" onclick="square()">x<sup>2</sup></button>
            <button id="controls" onclick="appendToScreen(Math.E)">e</button>
        </div>
        <div class="row4">
            <button onclick="appendToScreen('0')">0</button>
            <button onclick="appendToScreen('000')">000</button>
            <button id="controls" onclick="appendToScreen('.')">.</button>
            <button id="controls" onclick="calculatePercent()">%</button>
            <button id="controls" onclick="sqrt()">sqrt</button>
            <button id="controls" onclick="appendToScreen(Math.PI)">pi</button>
        </div>
        <div class="row5">
            <button id="colors" onclick="changeBackground()">bg</button>
            <button id="colors" onclick="changeScreen()">scr</button>
            <button id="controls" onclick="backspace()"><--</button>
            <button id="equal" onclick="calculate()">=</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>